<template>
  <el-dialog :title="data.index !==-1 ? '修改用户': '添加用户'" :visible.sync="dialogVisible" width="750px">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item label="用户名：" prop="username" size="300px">
        <el-input
          v-model="formData.username"
          placeholder="用户名"
          clearable
          prefix-icon="el-icon-s-custom"
          :style="{ width: '220px' }"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="formData.password"
          placeholder="密码"
          clearable
          type="password"
          prefix-icon="el-icon-umbrella"
          :style="{ width: '220px' }"
        ></el-input>
      </el-form-item>

      <el-form-item label="是否启用" prop="isActived">
        <el-input
          v-model="formData.isActived"
          placeholder="是否启用"
          clearable
          prefix-icon="el-icon-umbrella"
          :style="{ width: '220px' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否删除" prop="isDeleted">
        <el-input
          v-model="formData.isDeleted"
          placeholder="是否删除"
          clearable
          prefix-icon="el-icon-umbrella"
          :style="{ width: '220px' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks" size="">
        <el-input
          v-model="formData.remarks"
          placeholder="备注"
          clearable
          prefix-icon="el-icon-umbrella"
          :style="{ width: '220px' }"
        ></el-input>
      </el-form-item>
      <el-form-item size="large" class="btn-list">
        <el-button type="primary" @click="submitForm">{{data.index !==-1 ? '修改': '添加'}}</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>

      <slot name="cancel"></slot>
    </el-form>
  </el-dialog>
</template>

<style scoped>
form.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item__content {
  width: 220px;
}
.btn-list {
  margin-top: 100px;
  margin-left: 50px;
}
</style>

<script>
import { update, addUser } from "@/api/user";
export default {
  components: {},
  data() {
    return {
      dialogVisible: this.isdialogVisible,
      formData: {
        username: "",
        password: "",
        isActived: "",
        isDeleted: "",
        remarks: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: ["blur", "change"],
          },
        ],
        isActived: [
          {
            required: true,
            message: "是否启用不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^(1|0)$/,
            message: "是否启用只能是0或者1",
            trigger: ["blur", "change"],
          },
        ],
        isDeleted: [
          {
            required: true,
            message: "是否删除不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^(1|0)$/,
            message: "是否删除只能是0或者1",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  props: {
    data: {
      default: null,
    },
    isdialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    dialogVisible: function (val) {
      if (val === false) {
        this.$emit("updialogVisible");
      }
    },
    isdialogVisible: function (val) {
      this.dialogVisible = val;
      let row = this.data.row;
      if (!row) {
        for (const key in this.formData) {
          this.formData[key]=''
        }
        return;
      }
      this.formData.username = row.username;
      this.formData.password = row.password;
      this.formData.isActived = row.isActived;
      this.formData.isDeleted = row.isDeleted;
      this.formData.remarks = row.remarks;
      console.log(this.data);
    },
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单

        if (this.data.index !== -1) {
          update(this.data.row.id, this.formData)
            .then(({ data }) => {
              if (data.code !== 200) {
                this.$message({
                  message: "修改失败",
                  type: "error",
                });
                return;
              }

              let res = data.data;
              this.dialogVisible = false;
              this.$emit("upTableData", {
                id: res.id,
                username: res.username,
                password: res.password,
                isActived: res.isActived,
                isDeleted: res.isDeleted,
                remarks: res.remarks,
              });

              this.$message({
                message: "修改成功",
                type: "success",
              });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          addUser( this.formData)
            .then(({ data }) => {
              if (data.code !== 200) {
                this.dialogVisible = false;
                this.$message({
                  message: "添加失败",
                  type: "error",
                });
                return;
              }

              let res = data.data;
              this.dialogVisible = false;
              this.$emit("upTableData", {
                id: res.id,
                username: res.username,
                password: res.password,
                isActived: res.isActived,
                isDeleted: res.isDeleted,
                remarks: res.remarks,
              });

              this.$message({
                message: "修改成功",
                type: "success",
              });
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
};
</script>